/* reset */
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer { margin: 0 }
body,button,input,select,textarea { font: 12px/1.5 tahoma,"\5fae\8f6f\96c5\9ed1",sans-serif }
h1,h2,h3,h4,h5,h6 { font-size: 100% }
em,b,i { font-style: normal; font-weight: normal; }
a { text-decoration: none }
img { border: 0 }
button,input,select,textarea { font-size: 100%; outline: none }
table { border-collapse: collapse; border-spacing: 0 }
td,th,ul,ol { padding: 0 }
li { list-style: none }
.hid { font-size: 0; line-height: 0; text-indent: -999em; display: block; width: 100%; height: 0; overflow: hidden }
html { --max-width: 1596px; --min-width: 1230px; }
body { background: #fff; min-width: var(--min-width); }
/* layout */
.center-wrap { display: block; min-width: var(--min-width); max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }
.clearfix { *zoom: 1 }
.fl { float: left }
.fr { float: right }
.pr { position: relative }
.pa { position: absolute }
.ovh { overflow: hidden }
.none { display: none }
/* font */
@font-face { font-family: 'c-nav-float-title'; src: url('//game.gtimg.cn/images/lpl/web202301/font-fzqiangketis-extra-bold.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'block-title'; src: url('//game.gtimg.cn/images/lpl/web202301/font-zzgffh.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'DIN-Bold'; src: url('//game.gtimg.cn/images/lpl/web202301/font-din-bold.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'DIN-Regular'; src: url('//game.gtimg.cn/images/lpl/web202301/font-din-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Knucklehead'; src: url('//game.gtimg.cn/images/lpl/web202301/font-knucklehead.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'LPLKorium-Headline'; src: url('//game.gtimg.cn/images/lpl/web202301/font-lpl-korium-headline.ttf') format('truetype'); font-weight: normal; font-style: normal; }
/* spr */
.c-nav-logo-lol::after,.c-nav-link::before,.c-nav-link::after,.common-nav .hot,.c-breadcrumb a:not(:first-of-type)::after,.c-nav-match-icon,.c-breadcrumb a.c-home::before { background: url('//game.gtimg.cn/images/lpl/web202301/sprite.png') no-repeat; background-size: 614px 340px; }
/* nav */
.common-nav { height: 82px; overflow: hidden; background: #191b2a; position: relative; z-index: 10; --nav-width: 95px; --links-width: 863px; --links-margin: 59.5px; }
.common-nav .hot { background-position: -5px -2px; width: 20px; height: 23px; float: right; margin: -7px 0 0 5px; }
.c-nav-center { height: 100%; }
/* logo */
.c-nav-logos { height: 100%; display: flex; align-items: center; }
.c-nav-logo-lol { width: 86px; height: 28px; background: url('//game.gtimg.cn/images/lol/logo/middle-white.png') -12px -6px/110px 39px no-repeat; margin: 0 20px 0 0; }
.c-nav-logo-lol::after { content: ''; display: block; width: 1px; height: 17px; background-position: -2px -2px; position: absolute; top: 50%; right: -11px; margin-top: -8.5px; }
.c-nav-logo-lpl { width: 127px; height: 22px; background: url('//game.gtimg.cn/images/lpl/web202301/lpl.png') -1px -5px/129px 36px no-repeat; margin-top: -4px; }
/* link */
.c-nav-links { width: var(--links-width); height: 100%; margin-left: calc(var(--links-margin)/3); display: flex; position: relative; }
.c-nav-link { color: #d4d4d4; font-size: 16px; line-height: 82px; text-align: center; width: var(--nav-width); min-width: 60px; max-width: 95px; height: 100%; margin-right: 1px; position: relative; }
.c-nav-link:first-child { margin-right: 0; }
.c-nav-link::before { content: ''; display: block; width: 100%; height: 60px; background-position: calc(-2px + (var(--nav-width) - 95px)/2) -30px; position: absolute; bottom: -4px; left: 0; opacity: 0; transition: opacity .3s; }
.c-nav-link.active::before,.c-nav-link:hover::before { opacity: 1; }
.c-nav-link::after { content: ''; display: block; width: 1px; height: 17px; background-position: -2px -2px; position: absolute; top: 50%; left: 100%; margin-top: -8.5px; }
.c-nav-link:last-child::after { display: none; }
.c-nav-link a { color: #e2e2e2; transition: text-shadow 0.3s; display: block; height: 100%; align-items: center; position: relative; }
.c-nav-link a[href^="javascript"] { cursor: default; }
.c-nav-link.active a,.c-nav-link:hover a { color: #fe003f; font-size: 20px; font-weight: bold; text-shadow: 0 0 20px rgba(255,24,106,0.5); }
/* float */
.c-nav-floats { display: none; position: absolute; z-index: -1; top: 100%; left: 0; width: 100%; -webkit-animation: nav-float-in .3s; animation: nav-float-in .3s; }
@keyframes nav-float-in {
    0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; }
    100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
.c-nav-float { display: none; background: url('//game.gtimg.cn/images/lpl/web202301/nav-float-bg.png') 50% 100%/100% 290px no-repeat; }
.c-nav-float-title { color: #f2f2f2; font-size: 20px; line-height: 1.5; font-family: 'c-nav-float-title'; display: flex; justify-content: center; align-items: center; height: 54px; border-bottom: 1px solid #2e344c; }
.c-nav-float-title-logo { margin-right: 12px; }
.c-nav-float-title-logo.lpl { width: 104px; height: 18px; background: url('//game.gtimg.cn/images/lpl/web202301/lpl.png') -1px -5px/106px 30px no-repeat; margin-top: -4px; }
/* float.match */
.c-nav-float.match { height: 159px; border-top: 1px solid #2e344c; }
.c-nav-float.match .c-nav-float-links { display: flex; justify-content: center; }
.c-nav-float.match .c-nav-float-links a { color: #fff; font-size: 14px; line-height: 1.5; text-align: center; width: 158px; height: 158px; border: 1px solid transparent; border-top: none; margin-right: 24px; transition: background-color 300ms,border-color 300ms; }
.c-nav-float.match .c-nav-float-links a:last-child { margin-right: 0; }
.c-nav-float.match .c-nav-float-links a:hover { background: rgba(55,61,86,0.3); border-color: #2e344c; }
.c-nav-float.match .c-nav-float-links a .hot { float: none; display: inline-block; vertical-align: middle; }
.c-nav-float.match .c-nav-float-links .space { width: 50px; height: 158px; }
.c-nav-float.match .c-nav-match-icon { display: block; width: 150px; height: 120px; margin: 0 auto; }
.c-nav-float.match .c-nav-match-icon.worlds { background: url('//game.gtimg.cn/images/lpl/web202301/icon-world-nav.png') 0 0/100% 100% no-repeat; }
.c-nav-float.match .c-nav-match-icon.lpl { background-position: -154px -92px; }
.c-nav-float.match .c-nav-match-icon.msi { background-position: -306px -92px; }
.c-nav-float.match .c-nav-match-icon.demacia { background-position: -458px -92px; }
.c-nav-float.match .c-nav-match-icon.lcl { background-position: -2px -214px; }
.c-nav-float.match .c-nav-match-icon.ldl { background-position: -154px -214px; }
.c-nav-float.match .c-nav-match-icon.allstar { background-position: -306px -214px; }
.c-nav-float.match .c-nav-match-icon.toc { background-position: -458px -214px; }
@media screen and (max-width:1450px) {
    .c-nav-float.match .c-nav-float-links a { margin-right: 0; }
}
@media screen and (max-width:1280px) {
    .c-nav-float.match { height: 151px; }
    .c-nav-float.match .c-nav-float-links a { width: 150px; height: 150px; }
    .c-nav-float.match .c-nav-match-icon { width: 142px; height: 114px; background-size: 581px 322px; }
    .c-nav-float.match .c-nav-match-icon.lpl { background-position: -146px -87px; }
    .c-nav-float.match .c-nav-match-icon.msi { background-position: -290px -87px; }
    .c-nav-float.match .c-nav-match-icon.demacia { background-position: -434px -87px; }
    .c-nav-float.match .c-nav-match-icon.lcl { background-position: -2px -203px; }
    .c-nav-float.match .c-nav-match-icon.ldl { background-position: -146px -203px; }
    .c-nav-float.match .c-nav-match-icon.allstar { background-position: -290px -203px; }
    .c-nav-float.match .c-nav-match-icon.toc { background-position: -434px -203px; }
}
/* float.team */
.c-nav-float.team { min-height: 264px; background-size: 100% 100%; }
.c-nav-float.team .c-nav-float-links { overflow: hidden; }
.c-nav-float.team .c-nav-float-links-wrapper { width: calc(100% + 20px); font-size: 0; }
.c-nav-float.team .c-nav-float-links a { display: inline-block; vertical-align: top; width: 158px; height: 158px; border: 1px solid transparent; color: #fff; font-size: 14px; line-height: 1.5; text-align: center; margin-right: 19.5px; transition: background-color 300ms,border-color 300ms; }
.c-nav-float.team .c-nav-float-links a:hover { background: rgba(55,61,86,0.3); border-color: #2e344c; }
.c-nav-float.team .c-nav-float-links img { display: block; width: 70px; height: 70px; margin: 26px auto 10px; }
@media screen and (max-width:1620px) {
    .c-nav-float.team .c-nav-float-links-wrapper { width: 1440px; position: relative; left: 50%; margin-left: -708px; }
}
@media screen and (max-width:1470px) {
    .c-nav-float.team .c-nav-float-links-wrapper { width: 1260px; margin-left: -618px; }
}
/* recommendation */
.c-nav-recommendations { height: 100%; overflow: hidden; }
.c-nav-recommendation { height: 82px; display: flex; align-items: center; color: #e2e2e2; font-size: 14px; line-height: 1.5; font-weight: bold; }
.c-nav-recommendation img { width: 34px; height: 34px; margin-right: 10px; }
/* c-nav-login */
.c-nav-login { color: #fff; font-size: 14px; line-height: 82px; text-align: right; width: 180px; height: 82px; padding-left: 40px; }
.c-nav-login a { color: #eac05b; }
.c-nav-login .logged-in { line-height: 20px; padding-top: 20px; text-align: left; }
/* foot */
#footWrap { width: 100%; min-width: var(--min-width); padding: 45px 0; background-color: #e3e2e2; color: #9f9378; font-size: 12px; line-height: 24px; }
#footWrap a { color: #9f9378; }
#footWrap a:hover { text-decoration: underline; }
#footWrap li { color: #9f9378; }
#footWrap .foot_dark { background-color: #e3e2e2; }
#footWrap .foot_inner { max-width: 1358px; min-width: var(--min-width); height: auto; margin: 0 auto; overflow: hidden; position: relative; }
#footWrap .foot_lefts { display: block !important; height: 100px; width: auto; line-height: 100px; font-size: 0; text-align: left; position: absolute; left: 20px; top: 50%; margin-top: -50px; }
#footWrap .foot_lefts > a { display: inline-block; vertical-align: middle; margin: 0 24px 0 8px; }
#footWrap .foot_ieg_logo { background: url('//game.gtimg.cn/images/lpl/web202301/logo-tencent-game.png'); width: 189px; height: 34px; float: none; }
#footWrap .logo-riot { background: url('//game.gtimg.cn/images/lpl/web202301/logo-riot.png'); width: 83px; height: 56px; float: none; }
#footWrap .foot_links { width: 750px;margin-left: 500px; }
#footWrap .f_line { color: #9f9378; margin: 0 2px; }
#loginStatusSyncFrame_ams_ame { position: absolute; bottom: -100%; }
/* breadcrumb */
.c-breadcrumb { position: relative; height: 42px; background-color: #252834; }
.c-breadcrumb::before { content: ''; display: block; width: 100%; height: 1px; background: #373d55; position: absolute; top: 0; left: 0; }
.c-breadcrumb .center-wrap { display: flex; align-items: center; position: relative; height: 100%; }
.c-breadcrumb a { position: relative; height: 20px; line-height: 20px; font-size: 14px; color: #fff; }
.c-breadcrumb a.c-home { padding-left: 30px; }
.c-breadcrumb a.c-home::before { content: ''; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; transform: translateY(-50%); background-position: -27px -2px; }
.c-breadcrumb a:not(:first-of-type) { margin-left: 21px; }
.c-breadcrumb a:not(:first-of-type)::after { content: ''; position: absolute; top: 50%; left: -11px; width: 1px; height: 19px; background-position: -49px -2px; transform: translateY(-50%); pointer-events: none; }